<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册页面</title>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <!--核心Css文件-->
    <link rel="stylesheet" type="text/css" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reg.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery-1.12.4/jquery-1.12.4.min.js" type="text/javascript"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
        window.onload = function () {
            /*在gameid增加对检查按钮的验证*/
            var submitBtn = document.getElementById("reg");

            submitBtn.onclick = function () {
                if (!document.getElementById("checkbox").checked) {
                    alert("请阅读注册协议,并勾选按钮!");
                    $('#reg').removeAttr("disabled");
                    return false;
                }
            };
        }
    </script>
</head>

<body>
<canvas class="cavs" width="1575" height="1337"></canvas>
<div>
    <div class="reg-bg">
        <div class="reg-title">
            <h3 style="margin: 30px 20px; position: absolute; color: #D3D7F7">新用户注册</h3>
        </div>
        <div>
            <hr>
        </div>
        <div class="loginmain">
            <hr>
            <form class="form-horizontal" role="form" action="/company/register" method="post">
                <div class="form-group">
                    <label for="nickName" class="control-label col-sm-5">企业编号:</label>
                    <div class="col-sm-3 has-feedback" id="nickName-box">
                        <input type="text" class="form-control" id="nickName" name="comNo" placeholder="请输入企业注册编号"
                               required="">
                        <span id="nickName-exists" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="nickName-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="userName" class="control-label col-sm-5">企业名称:</label>
                    <div class="col-sm-3 has-feedback" id="userName-box">
                        <input type="text" class="form-control" id="userName" name="comName" placeholder="请输入企业名称"
                               required="">
                        <span id="userName-exists" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="userName-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-sm-5">企业邮箱:</label>
                    <div class="col-sm-3 has-feedback" id="email-box">
                        <input type="text" class="form-control" id="email" name="comEmail" placeholder="请输入企业邮箱"
                               required="">
                        <span id="miss-email" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="email-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="userPsw" class="control-label col-sm-5">密&emsp;&emsp;码:</label>
                    <div class="col-sm-3 ">
                        <input type="password" class="form-control" id="userPsw" name="comPwd" placeholder="请输入密码"
                               required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password2" class="control-label col-sm-5">确认密码:</label>
                    <div class="col-sm-3 has-feedback" id="password2-box">
                        <input type="password" class="form-control" id="password2" name="password2"
                               placeholder="请再次输入密码"
                               required>
                        <span id="miss-matching" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="password2-help" class="help-block"></p>
                </div>

                <div class="form-group">
                    <label for="phone" class="control-label col-sm-5">企业电话:</label>
                    <div class="col-sm-3 has-feedback" id="phone-box">
                        <input type="text" class="form-control" id="phone" name="comPhone" placeholder="请输入手机号"
                               required="">
                        <span id="phone-exists" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="phone-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="identify" class="col-sm-5 control-label">验&ensp;证&ensp;码:</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="identify" name="identify" required
                               placeholder="验证码">
                    </div>
                    <img id="identify-code">
                </div>
                <div class="form-group">
                    <div class="checkbox col-sm-offset-5 col-sm-5">
                        <input id="checkbox" type="checkbox"><i></i> 我同意注册协议</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-4">
                        <button type="submit" id="reg" class="btn btn-primary" onclick="send()">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;注&emsp;&emsp;册&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</button>
                    </div>
                </div>

                <p class="text-muted text-center">
                    <small>已经有账户了？</small><a href="login.html">点此登录</a>
                    &emsp;&emsp;&emsp;&emsp;
                    <small>忘记密码？</small><a href="register.html">找回密码</a>
                </p>

            </form>
        </div>

    </div>
    <!--   底部-->
    <div class="row reg-bottom">
        <div class="col-sm-12">Pocket © 2021 All Rights Reserved</div>
        <div class="col-sm-12">Joker小组版权所有</div>
    </div>
</div>

<script>
    //验证密码


</script>
<script>
    $(function () {
        /*这个可以防止浏览器后退时候图片不刷新*/
        $("#identify-code").prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());

        let $form = $("form");

        /*点击框自动清空内容*/
        $form.on("click", ":input[type!=submit]", function () {
            $(this).prop("value", "");
        });

        /*添加勾这个图标*/
        function addOK(box, span) {
            span.removeClass("glyphicon-remove");
            box.removeClass("has-error");
            span.addClass("glyphicon-ok");
            box.addClass("has-success");
        }

        /*添加×这个图标*/
        function addRemove(box, span) {
            span.removeClass("glyphicon-ok");
            box.removeClass("has-success");
            span.addClass("glyphicon-remove");
            box.addClass("has-error");
        }

        /*两次密码验证*/
        $("#password2,#userPsw").blur(function () {
            let password = $("#userPsw").val();
            let password2 = $("#password2").val();
            let $missmatchingSpan = $("#miss-matching");
            let $password2Box = $("#password2-box");
            let $password2Help = $("#password2-help");

            if (password.trim() === "" || password2.trim() === "" || password2 !== password) {
                addRemove($password2Box, $missmatchingSpan);
                $password2Help.html("两次密码不一致");
            } else {
                addOK($password2Box, $missmatchingSpan);
                $password2Help.html("");
            }
        });
        /*邮箱校验*/
        $("#email").blur(function () {
            let email = $("#email").val();
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            let $emailExists = $("#miss-email");
            let $emailBox = $("#email-box");
            let $emailHelp = $("#email-help");

            if (!reg.test(email)) {
                addRemove($emailBox, $emailExists);
                $emailHelp.html("邮箱格式错误");
            } else {
                addOK($emailBox, $emailExists);
                $emailHelp.html("");
            }
        });

        /*手机号校验*/
        $("#phone").blur(function () {
            let phone = $("#phone").val();
            var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
            let $phoneExists = $("#phone-exists");
            let $phoneBox = $("#phone-box");
            let $phoneHelp = $("#phone-help");

            if (!regex.test(phone)) {
                addRemove($phoneBox, $phoneExists);
                $phoneHelp.html("手机号格式错误");
            } else {
                addOK($phoneBox, $phoneExists);
                $phoneHelp.html("");
            }
        });


        /*ajax验证后台用户名是否存在*/
        $("#nickName").blur(function () {
            let username = $("#nickName").val().trim();
            if (username !== "") {
                $.ajax({
                    url: "company/name",
                    type: "post",
                    data: {
                        comNo: username
                    },
                    dataType: "text",
                    success: function (data) {
                        let $usernameBox = $("#nickName-box");
                        let $userExistsSpan = $("#nickName-exists");
                        let $usernameHelp = $("#nickName-help");

                        if (data === "no") {
                            addRemove($usernameBox, $userExistsSpan);
                            $usernameHelp.html("企业编号已存在");
                        } else {
                            addOK($usernameBox, $userExistsSpan);
                            $usernameHelp.html("");
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                })
            }
        });

        /*ajax验证*/
        $("#identify").blur(function () {
            var myName = $("#identify").val();
            console.log("输入验证码：" + myName);
            $.ajax({
                url: "company/myIdentify",
                type: "post",
                data: {idfy: myName},
                success: function (data) {
                    console.log(data);
                    if (data === "ng") {
                        alert("验证码错误！");
                        $('#reg').attr('disabled', "true");//添加disabled属性
                    } else if (data === "ok") {
                        $('#reg').removeAttr("disabled"); //移除disabled属性
                    }
                }
            });
        });

        /*点击生成新的验证码*/
        $("#identify-code").click(function () {
            $(this).prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());
        });

    })


    /*$(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });*/
</script>

</body>

</html>
<script src="js/ban.js"></script>